<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体</title>
    <style>
        /* Serif字体中字符在行的末端拥有额外的装饰 */
        p.serif {
            font-family: "Times New Roman", Times, serif;
        }

        /* "Sans"是指无 - 这些字体在末端没有额外的装饰 */
        p.sansserif {
            font-family: 黑体, Helvetica, sans-serif;
        }

        /* 所有的等宽字符具有相同的宽度 ---Monospace*/

        /* 字体正常 */
        p.normal {
            font-style: normal;
        }

        /* 斜体 推荐使用*/
        p.italic {
            font-style: italic;
        }

        /* 斜体 不推荐使用 */
        p.oblique {
            font-style: oblique;
        }

        /* 字体大小 */
        body {
            font-size: 100%;
        }

        /* 1em的默认大小是16px */
        h4 {
            font-size: 2.5em;
        }

        h5 {
            font-size: 1.875em;
        }

        p {
            font-size: 0.875em;
        }

        /* 字体加粗---正常 */
        p.normal {
            font-weight: normal;
        }

        /* 字体减细--- */
        p.light {
            font-weight: lighter;
        }

        /* 字体加粗--超粗 */
        p.thick {
            font-weight: bold;
        }

        /* 字体加粗--超粗 */
        p.thicker {
            font-weight: 900;
        }
        /* 字体正常 */
        p.normal {
            font-variant: normal;
        }
        /* 字体转变 与上面正常的对比*/
        p.small {
            font-variant: small-caps;
        }
    </style>
</head>

<body>
    <h1>CSS font-family</h1>
    <p class="serif">这一段的字体是 Times New Roman </p>
    <p class="sansserif">这一段的字体是黑体.</p>
    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
    <p class="oblique">这是一个段落,斜体。</p>
    <h4>This is heading 1</h4>
    <h5>This is heading 2</h5>
    <p>This is a paragraph.</p>
    <p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
    <p class="normal">My name is Hege Refsnes.</p>
    <p class="small">My name is Hege Refsnes.</p>
</body>

</html>